/**
 * Created by kedong on 2016/4/9.
 */
var userList = [
    {username: 'mac', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'boddi', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'tigger', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'cat', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'Peter', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'Charlie', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'QiLong', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'mantutas', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'vce', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: '张明', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: '刘航', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'},
    {username: 'James', picture: 'http://img.mukewang.com/551d653d00017e6e01000100-100-100.jpg'}
];

var Editor = React.createClass({
    rawMarkup: function() {
        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
        return { __html: rawMarkup };
    },
    handleChange: function (e) {
        e.preventDefault();
        var focusNode = this.refs.edit.getDOMNode(),
            text = focusNode.value,
        // 光标的当前位置
            offset = focusNode.selectionStart,
        // 光标之前的字符串
            beforeOffsetText = text.substring(0, offset),
        // 光标前一个字符
            beforeOffsetLastChar = beforeOffsetText.substring(offset - 1),
            at = this.props.at;
        /** @符号监听 */
        if (beforeOffsetLastChar === '@') {
            // 设置@状态
            this.props.handleSetIsAt({
                isAt: true,
                // @符号的位置
                atOffset: offset - 1,
                usernameFilter: ""
            })
        } else if (at.isAt) {
            at.usernameFilter = text.substring(at.atOffset + 1, offset);
            this.props.handleSetIsAt(at);
        }
    },
    handleKeyDown: function (e) {
        console.log(e.key);
        e.preventDefault();
        var focusNode = this.refs.edit.getDOMNode(),
            text = focusNode.value,
        // 光标的当前位置
            offset = focusNode.selectionStart,
        // 光标之前的字符串
            beforeOffsetText = text.substring(0, offset),
        // 光标后面的字符串
            afterOffsetText = text.substring(offset),
        // 光标前一个字符
            beforeOffsetLastChar = beforeOffsetText.substring(offset - 1);
        switch (e.key) {
            case "Backspace":
                /**
                 * 如果光标前一个字符为空格，那么它之前的字符串可能是一个@标识符，
                 * 截取光标前面最后一个@标识符
                 */
                if (beforeOffsetLastChar == " ") {
                    alert()
                }
                break;
            case "Delete":

                break;
            case "ArrowLeft":

                break;
            case "ArrowRight":

                break;
            case "ArrowUp":

                break;
            case "ArrowDown":

                break;
            case "Control":
                this.props.handleSetControlStatu(true);
                break;
            case "Enter":
                if (this.props.controlIsDown) {
                    alert('换行');
                    this.props.handleSetTextareaContent(text);
                } else {
                    alert('发送');
                    //e.preventDefault();
                }
                break;
        }

    },
    handleKeyUp: function (e) {
        switch (e.key) {
            case "Control":
                this.props.handleSetControlStatu(false);
                break;
        }
    },
    componentDidMount: function () {
        this.props.handleInitEditor(this);
    },
    render: function () {
        return (
            <pre id="editAera" className="editArea" contentEditable ref="edit"
                onInput={this.handleChange}
                onChange={this.handleChange}
                onKeyUp={this.handleKeyUp}
            ></pre>
        );
    }
});
var AtItem = React.createClass({
    /**
     * 点击事件
     */
    handleClick: function () {
        var username = this.props.user.username,
            editNode = this.props.editor.getDOMNode(),
            text = editNode.value,
        // 光标的当前位置
            offset = editNode.selectionStart,
        // 光标后面的字符串
            afterOffsetText = text.substring(offset),
            at = this.props.at,
        // @符号之前的字符串
            beforeAtText = text.substring(0, at.atOffset),
            atStr = "@" + username + " ",
            synthesisText = beforeAtText + atStr + afterOffsetText;
        this.props.handleSetTextareaContent(synthesisText);
        this.props.handleSetIsAt({
            isAt: false,
            atOffset: -1,
            usernameFilter: ""
        })
    },
    render: function () {
        return (
            <div className="atItem" onClick={this.handleClick}>
                <span>
                    <img src={this.props.user.picture} alt=""/>
                </span>
                <span>
                    <h3>{this.props.user.username}</h3>
                </span>
            </div>
        );
    }
});
var AtList = React.createClass({
    render: function () {
        var at = this.props.at, list;
        if (at.isAt) {
            list = this.props.userList.map(function (user) {
                if (user.username.indexOf(at.usernameFilter) > -1) {
                    return <AtItem user={user} at={at} editor={this.props.editor}
                        handleSetIsAt={this.props.handleSetIsAt}
                        handleSetTextareaContent={this.props.handleSetTextareaContent}/>
                }
            }.bind(this));
        }
        return at.isAt ? (
            <div className="atList">
                {list}
            </div>
        ) : null;
    }
});

var AtBox = React.createClass({
    getInitialState: function () {
        return {
            at: {
                isAt: false,
                atOffset: -1,
                usernameFilter: ""
            }
        };
    },
    handleSetIsAt: function (at) {
        this.setState({at: at});
    },
    handleSetTextareaContent: function (text) {
        this.state.editor.getDOMNode().value = text;
    },
    handleInitEditor: function (editor) {
        this.setState({editor: editor})
    },
    handleSetControlStatu: function (statu) {
        this.setState({control: statu})
    },
    render: function () {
        return (
            <div>
                <AtList userList={this.props.userList} at={this.state.at} editor={this.state.editor}
                    handleSetIsAt={this.handleSetIsAt}
                    handleSetTextareaContent={this.handleSetTextareaContent}/>

                <Editor handleSetIsAt={this.handleSetIsAt} at={this.state.at}
                    handleInitEditor={this.handleInitEditor}
                    handleSetControlStatu={this.handleSetControlStatu}
                    handleSetTextareaContent={this.handleSetTextareaContent}
                    controlIsDown={this.state.control}
                    textareaContent={this.state.textareaContent}/>
            </div>
        );
    }
});

React.render(<AtBox userList={userList}/>, $("#container")[0]);
